<template>
    <div>
        <!-- <div class="my_top">
            <input type="text" placeholder="✍请输入您需要查找的菜名" class="my_name" @keyup.enter="find">
        </div> -->
        <div>
            <h1 class="title">每日一笑</h1>
            <hr>
        </div>

     <ul>
         <li v-for="it in list" :key="it.id">
            <div class="one">
                <div class="header">
                   <div> 
                    <img :src="it.header" alt="" class="touxiang">
                   <span class="name"> {{ it.name }}</span>
                   </div>
                   <div class="time">
                       {{ it.passtime }}
                   </div>
                </div>
               <div>
                     <span class="text">{{ it.text }}</span>
               <img :src="it.thumbnail" alt="" class="content">
               <span class=""><span class="comment">神评：</span>{{ it.top_comments_content }}</span>
               </div>
            

            </div>
            <hr>
         </li>
     </ul>
    </div>
</template>
<script>
export default {
    data(){
        return{
            list:[],
            id:""
           
            
        
        }
    },created(){
        this.find();
    }
    ,methods:{
        find(){
            var that = this;
            this.$axios.get('https://api.apiopen.top/getJoke?page=1&count=99&type=video').then(
                response =>{
                    // console.log(response.data.result)
                    that.list = response.data.result
                }
            ).catch(
                ree => {}
            )
        }
    }
    
}
</script>
<style scoped>
.comment{
    color: red;
}
.text{
    font-size: 20px;
    font-weight: 100;
}
.header{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.name{
  
  
    font-size: 15px;
}
.title{
    text-align: center;
}
.one{
    margin-bottom: 50px;
}

body{
    padding: 0;
    margin: 0;
}
ul{
    padding-left: 0;
    list-style: none;
}
.content{
    width: 100%;
    height: 300px;
}
.touxiang{
    border-radius: 50%;
}
.time{
    margin-top: 30px;
    height: 30px;
    padding-bottom: -20px;
}

</style>